<script setup lang="ts">
  import HPlainButton from '@/components/common/button/HPlainButton.vue'

  const emits = defineEmits<{
    (e: 'default'): void
    (e: 'addField', value: 1 | 2 | 3): void
    (e: 'save'): void
  }>()

  // 用于渲染按钮
  const buttonList: Array<{ label: string; type: 1 | 2 | 3 }> = [
    { label: '新增文字', type: 1 },
    { label: '新增图片', type: 2 },
    { label: '新增视频', type: 3 },
  ]

  // 新增文字、图片、视频事件
  const handleAddField = (type: 1 | 2 | 3) => {
    emits('addField', type)
  }

  // 恢复为默认的设置
  const onDefault = () => {
    emits('default')
  }

  // 保存事件
  const onSave = () => {
    emits('save')
  }

  // 取消聚焦
  const onCancelFocus = (e: Event) => {
    ;(e.target as HTMLButtonElement).blur()
  }
</script>

<template>
  <div>
    <div style="display: flex; gap: 5px">
      <template v-for="button in buttonList" :key="button.label">
        <HPlainButton @click="handleAddField(button.type)" @focus="onCancelFocus">{{
          button.label
        }}</HPlainButton>
      </template>
      <HPlainButton @click="onDefault" @focus="onCancelFocus">恢复为默认</HPlainButton>
      <HPlainButton @focus="onCancelFocus" @click="onSave">保存</HPlainButton>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .add_btn {
    width: 4vw;
  }

  .default_btn {
    width: 4.6vw;
  }

  .save_btn {
    width: 2.8vw;
    background-color: $primaryColor;
    border-color: $primaryColor;

    &:hover {
      background-color: rgba($primaryColor, 0.8);
      border-color: rgba($primaryColor, 0.8);
    }
  }
</style>
